<template>
  <Button
    v-if="_hasPermission"
    v-bind="omit(props, 'code', 'icon')"
    class="px-[10px]"
  >
    <Flex align="center">
      <component :is="__icon" class="w-3 h-3 mr-1" />
      <slot></slot>
    </Flex>
  </Button>
</template>
<script setup lang="tsx">
import { VNode, computed, h, isVNode, useAttrs } from 'vue';
import { Button, type ButtonProps, ConfigProvider, Flex } from 'ant-design-vue';
import { omit } from 'lodash-es';
import { hasPermission } from '@/permission/index';
import SvgIcon from '@/components/SvgIcons/Index.vue';

defineOptions({
  name: 'b-button',
});

enum IconEnum {
  'add' = 'add',
  'activate' = 'activate',
  'config' = 'config',
  'import' = 'import',
  'export' = 'export',
  'search' = 'search',
  'reset' = 'reset',
  'stat' = 'stat',
  'delete' = 'delete',
  'refresh' = 'refresh',
  'conf' = 'conf',
  'data-permission' = 'data-permission',
  'data' = 'data',
  'del' = 'del',
  'detail' = 'detail',
  'edit' = 'edit',
  'examine' = 'examine',
  'expand' = 'expand',
  'gen' = 'gen',
  'handle' = 'handle',
  'log' = 'log',
  'params' = 'params',
  'push' = 'push',
  'remote' = 'remote',
  'restore' = 'restore',
  'revoke' = 'revoke',
  'work' = 'work',
  'camera' = 'camera',
  'monitor' = 'monitor',
  'batchonline' = 'batchonline',
  'batchmonitor' = 'batchmonitor',
  'verify' = 'verify',
}

export interface _ButtonProps extends ButtonProps {
  code?: string | string[];
  icon?: VNode | keyof typeof IconEnum;
}

const props = defineProps<_ButtonProps>();
const __icon = computed(() => {
  if (isVNode(props.icon)) {
    return props.icon;
  } else {
    if (!props.icon) return;
    return <SvgIcon name={props.icon} />;
  }
});
const isLink = computed(() => !__icon.value && !props.icon);
const _hasPermission = computed(() =>
  props.code ? hasPermission(props.code) : true,
);
</script>
<style scoped>
:deep(.anticon) {
  display: inline-flex;
}
</style>
